<template>
    <div class="total_box">
        <div class="left">
            <div class="score">{{ $fomartRate(info.scoreOverall) }}</div>
            <div class="top_bottom">
                <div class="top">
                    <span>{{ showRateText(info.scoreOverall) }}</span>
                    <el-divider direction="vertical" class="el_divider"></el-divider>
                    <span>{{ total }}条</span>
                </div>
                <div class="bottom">
                    高于88%的口腔机构
                </div>
            </div>
        </div>
        <div class="right">
            <div class="cell">
                <span>专业</span>
                <span class="num">{{ $fomartRate(info.scoreProfessional) }}</span>
                <span class="line"><i :style="`width:${getWidth(info.scoreProfessional)}%`"></i></span>
            </div>
            <div class="cell">
                <span>服务</span>
                <span class="num">{{ $fomartRate(info.scoreService) }}</span>
                <span class="line"><i :style="`width:${getWidth(info.scoreService)}%`"></i></span>
            </div>
            <div class="cell">
                <span>环境</span>
                <span class="num">{{ $fomartRate(info.scoreSurroundings) }}</span>
                <span class="line"><i :style="`width:${getWidth(info.scoreSurroundings)}%`"></i></span>
            </div>
        </div>
    </div>
</template>
<script>
import { Divider } from 'element-ui'
import { showRateText } from '@/utils/utils'
export default {
    name: 'UserScore',
    props: {
        info: {
            type: Object,
            default: function () {
                return {}
            }
        },
        total: {
            type: [String, Number],
            default: ''
        }
    },
    components: {
        [Divider.name]: Divider
    },
    data() {
        return {
            showRateText: str => { return showRateText(str) }
        }
    },
    methods: {
        // 获取宽度
        getWidth(str) {
            if (!str) {
                return 0;
            }
            let o = Number(str);
            let num = o / 5 * 100;
            if (num > 100) {
                return 100
            } else {
                return num;
            }
        },

        // 格式化分数
        fomartRate(str){
            let num = Number(str)
            if(!num){
                return '0.0'
            }
            if(num>5){
                return '5.0';
            }
            let _rate = Number(str).toFixed(2);
            return _rate;
        }
    }
}
</script>
<style lang="less" scoped>
@import './score.less';
</style>